<template>
    <m-hot-search></m-hot-search>
    <template v-for="layout in layouts">
        <m-swiper v-if="layout.type == 1" :items="layout.swiper"></m-swiper>
        <m-notice-bar
            v-if="layout.type == 2"
            :text="layout.notice?.text"
            :image="layout.notice?.imageUrl"
            :page-url="layout.notice?.pageUrl"
        ></m-notice-bar>
        <m-column v-if="layout.type == 3" :items="layout.column?.items"></m-column>
        <m-theme v-if="layout.type == 4" :backurl="layout.theme?.backgroundUrl" :items="layout.theme?.items"></m-theme>
        <template v-if="layout.type == 5">
            <m-special
                v-for="special in layout.specials"
                :title="special?.title"
                :sub-title="special?.subTitle"
                :products="special?.products"
            ></m-special>
        </template>
        <m-category-product-list
            v-if="layout.type == 6"
            :categorys="layout.categorys"
            ref="cateProductListRef"
        ></m-category-product-list>
        <template v-if="layout.type == 7">
            <uni-card>
                <m-image-link :image-url="layout.imageLink?.imageUrl" height="200rpx"></m-image-link>
            </uni-card>
        </template>
    </template>
    <m-scroll-top
        :scrollTop="scrollTop"
        :icons="[{ imageUrl: '/static/icon/search.png', click: () => {} }]"
    ></m-scroll-top>
    <m-bottom-pannel
        @close="closeBottomImageLink"
        v-if="bottomImageLink"
        :height="bottomImageLinkHeight"
        :available-close="true"
    >
        <image :src="bottomImageLink.imageUrl" class="m-image-link-img" mode="scaleToFill" />
    </m-bottom-pannel>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import { getHomeData } from '@/api/home'
import MSwiper from '@/components/common/MSwiper.vue'
import MNoticeBar from '@/components/common/MNoticeBar.vue'
import MTheme from './MTheme.vue'
import MColumn from './MColumn.vue'
import MSpecial from './MSpecial.vue'
import MImageLink from '@/components/common/MImageLink.vue'
import MScrollTop from '@/components/common/MScrollTop.vue'
import MCategoryProductList from './MCategoryProductList.vue'
import MHotSearch from '@/components/business/MHotSearch.vue'
import MBottomPannel from '@/components/common/MBottomPannel.vue'
//初始化主页数据
const layouts = ref<Array<Layout>>()
const bottomImageLink = ref<Layout['imageLink']>()
onLoad(() => {
    try {
        getHomeData().then((res: MResponse<Array<Layout>>) => {
            layouts.value = res.data
            bottomImageLink.value = res.data?.find((v) => v.type == 8)?.bottomImageLink
        })
    } catch (error) {
        uni.showToast({
            title: error as string,
            duration: 2000
        })
    }
})
//返回顶部
const cateProductListRef = ref<Array<InstanceType<typeof MCategoryProductList>> | null>(null)
let scrollTop = ref(0)
onPageScroll((e) => {
    scrollTop.value = e.scrollTop
    if (cateProductListRef.value) {
        cateProductListRef.value[0].stick(e.scrollTop)
    }
})
//不能删除，为了触发组件中的onReachBottom时间
onReachBottom(() => {})
//底部广告栏处理
const showBottomImageLink = ref(true)
function closeBottomImageLink() {
    showBottomImageLink.value = false
}
const bottomImageLinkHeight = '80rpx'
</script>

<style lang="scss" scoped>
.m-image-link-img {
    height: v-bind(bottomImageLinkHeight);
    width: 100%;
}
</style>
